<template>
    <div class="online-home">
      <van-cell-group>
        <van-field v-model="username" label="用户姓名" placeholder="请输入姓名"/>
        <van-field v-model="phone" type="number" label="联系方式" placeholder="请输入手机号码"/>
        <van-field v-model="age" type="number" label="宠物年龄" placeholder="请输入宠物年龄"/>
        <van-field v-model="textarea" type="textarea" label="留言内容" placeholder="请输入内容"/>
        <van-field value="请上传宠物图片" label="上传图片"  disabled/>
      </van-cell-group>
      <div class="img-list">
        <div class="thubs-img">
          <span v-for="(item,index) in thubsImg" :key="index"><img src="" alt=""></span>
        </div>
        <div class="upload-box">
          <van-icon name="plus" size="26" color="#aaa"/>
        </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import { Field, CellGroup, Icon } from 'vant';
  Vue.use(Field);
  Vue.use(CellGroup)
  Vue.use(Icon)
    export default {
        name: "index",
        data() {
            return {
              username:"",
              phone:"",
              age:"",
              textarea:"",
              thubsImg:[]
            }
        },
        created() {
          console.log(this.$route.meta.title)
          this.$store.commit("setTitle", this.$route.meta.title)
        }
    }
</script>

<style scoped lang="scss">
  .img-list{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    .upload-box{
      display: flex;
      flex: 0 0 80px;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border: 2px dashed #ddd;
      cursor: pointer;
    }
    .thubs-img{
      display: flex;
      span{
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
        margin-right: 6px;
        background: #f8f8f8;
        img{
          width: 80px;
          height: 80px;
          object-fit: cover;
        }
      }
    }
  }
</style>
